<template>
    <div class="nvb_menu">
        <a-menu
            @menu-item-click="clickMenu"
            v-model:selected-keys="selectedKeys"
            v-model:open-keys="openKeys"
            accordion
            show-collapse-button
            @collapse="onCollapse"
        >
            <template v-for="item in menuList" :key="item.key">
                <a-menu-item :key="item.name" v-if="item.child?.length === 0">
                    <template #icon>
                        <component :is="item.icon"></component>
                    </template>
                    {{ item.title }}
                </a-menu-item>

                <a-sub-menu v-else :key="item.name">
                    <template #icon>
                        <component :is="item.icon"></component>
                    </template>
                    <template #title>{{ item.title }}</template>
                    <a-menu-item v-for="sub in item.child" :key="sub.name">
                        {{ sub.title }}
                    </a-menu-item>
                </a-sub-menu>
            </template>
        </a-menu>
    </div>
</template>

<script setup lang="ts">
import { IconMenu, IconUser } from '@arco-design/web-vue/es/icon'
import { ref, watch } from 'vue'
import type { Component } from 'vue'

import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'

import { useStore } from '@/stores'

const router = useRouter()
const route = useRoute()

const store = useStore()
interface IMenu {
    title: string
    icon?: Component
    name?: string //路由名字
    child?: IMenu[]
}

const menuList: IMenu[] = [
    {
        title: '仪表盘',
        icon: IconMenu,
        name: 'dashboard',
        child: [],
    },
    {
        title: '首页',
        icon: IconMenu,
        name: 'home',
        child: [
            {
                title: '师资力量',
                name: 'faculty',
            },
            {
                title: '学生风采',
                name: 'student_tyle',
            },
            {
                title: '振涛实讯',
                name: 'zt_real_info',
            },
            {
                title: '头图更改',
                name: 'header_change',
            },
        ],
    },
    {
        title: '学院概况',
        icon: IconUser,
        name: 'college_profile',
        child: [
            {
                title: '地理位置',
                name: 'geographic_position',
            },
            {
                title: '振涛大事记',
                name: 'zt_big_event',
            },
            {
                title: '合作企业',
                name: 'cooperative_enterprise',
            },
        ],
    },
    {
        title: '热门专业',
        icon: IconUser,
        name: 'popular_major',
        child: [
            {
                title: '人工智能',
                name: 'artificial_intelligence',
            },
            {
                title: '传媒',
                name: 'media',
            },
            {
                title: '网站工程',
                name: 'website_engineering',
            },
            {
                title: '元宇宙',
                name: 'metaverse',
            },
            {
                title: '大数据',
                name: 'big_data',
            },
            {
                title: '云计算',
                name: 'cloud_computing',
            },
        ],
    },
    {
        title: '特色优势',
        icon: IconUser,
        name: 'characteristic_advantage',
        child: [
            {
                title: '产教融合',
                name: 'cjrh',
            },
            {
                title: '企业文化',
                name: 'enterprise_culture',
            },
            {
                title: '真实项目',
                name: 'real_project',
            },
        ],
    },
    {
        title: '校园环境',
        icon: IconUser,
        name: 'campus_environment',
        child: [
            {
                title: '智慧成长',
                name: 'Intellectual_growth',
            },
            {
                title: '健康饮食',
                name: 'healthy_diet',
            },
            {
                title: '学生之家',
                name: 'student_home',
            },
        ],
    },
    {
        title: '联系我们',
        icon: IconUser,
        name: 'contact_us',
        child: [
            {
                title: '招生',
                name: 'enroll_student',
            },
            {
                title: '招聘岗位',
                name: 'recruitment_position',
            },
            {
                title: '联系',
                name: 'contact',
            },
        ],
    },
    {
        title: '学校地址',
        icon: IconMenu,
        name: 'school_address',
        child: [],
    },
    {
        title: '个人中心',
        icon: IconUser,
        name: 'user_center',
        child: [
            {
                title: '我的信息',
                icon: IconUser,
                name: 'user_info',
            },
        ],
    },
    {
        title: '用户管理',
        icon: IconUser,
        name: 'users',
        child: [
            {
                title: '用户列表',
                icon: IconUser,
                name: 'user_list',
            },
        ],
    },
    {
        title: '系统管理',
        icon: IconUser,
        name: 'system',
        child: [
            {
                title: '菜单列表',
                icon: IconUser,
                name: 'menu_list',
            },
            {
                title: '系统日志',
                icon: IconUser,
                name: 'log_list',
            },
        ],
    },
]

const selectedKeys = ref([route.name])
const openKeys = ref([route.matched[1].name])

function clickMenu(name: string) {
    router.push({ name })
}

watch(
    () => route.name,
    () => {
        selectedKeys.value = [route.name]
        openKeys.value = [route.matched[1].name]
    },
)

function onCollapse(collapsed: boolean) {
    store.setCollapsed(collapsed)
}
</script>

<style lang="scss">
.nvb_menu {
    height: calc(100% - 90px);
    .arco-menu {
        height: 100%;
        position: inherit;
    }
    .arco-menu-collapse-button {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(50%, -50%);
        opacity: 0;
        transition: all 0.3s;
    }
}
aside:hover {
    .nvb_menu {
        .arco-menu-collapse-button {
            opacity: 1;
        }
    }
}
</style>
